<template>
	<view class="course-container">
		<view class="course-header">我的课程名称</view>
		<view class="course-image">
			<image src="../../static/images/语文.png" ></image>
		</view>
		<view class="teacher-info">
			<view class="teacher-avatar">
				<image src="../../static/images/Snipaste_2025-05-23_20-19-36.png" @click="handleToTeacherMess()"></image>
			</view>
			<view class="teacher-details">
				<view class="teacher-name">韩老师</view>
				<!-- <view class="teacher-age">年龄：xx</view> -->
				<view class="teacher-experience">资历详情资深老师，我啥都会</view>
			</view>
		</view>
		<view class="course-desc">课程描述：</view>

		<view class="course-comment">
			<view class="comment-icon"></view>
			<view class="comment-text">评论</view>
		</view>
		<view class="buttons">
			<button class="consult-button">聊天</button>
		</view>
	</view>
</template>

<script>
	// import { getClassesOldList } from '../../api/classes_old/classes_old.js';

	export default {
		data() {
			return {

			}
		},
		methods: {
			tellp() {
				console.log('聊天')
			},
			handleToTeacherMess() {
				uni.navigateTo({
					url: "/pages/teacherMessage/teacherMessage"
				})
			}

		},

	};
</script>

<style scoped>
	page {
		box-sizing: border-box;
		height: 100vh;
		width: 100vw;
		margin: 0;
		padding: 0;
		background-color: #f5f5f5;
	}

	.course-container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.course-header {
		background-color: #ff9800;
		padding: 20rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
	}

	.course-image {
		height: 400rpx;
		/* 图片区域高度，使用rpx适配 */
		background-color: #fff;
		margin: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.course-image image {
		width: 100%;
		height: 100%;
	}

	.teacher-info {
		display: flex;
		align-items: center;
		margin: 0 20rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.teacher-avatar {
		width: 100rpx;
		height: 100rpx;
		background-color: #ccc;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.teacher-avatar image {
		width: 100%;
		height: 100%;
	}

	.teacher-details {
		flex: 1;
	}

	.teacher-name {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.teacher-age,
	.teacher-experience {
		font-size: 28rpx;
		color: #666;
	}

	.course-desc {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.course-desc {
		font-size: 28rpx;
		line-height: 1.6;
	}

	.course-comment {
		display: flex;
		align-items: center;
		margin: 0 20rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.comment-icon {
		width: 40rpx;
		height: 40rpx;
		background-color: #4caf50;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.comment-text {
		font-size: 28rpx;
	}

	.buttons {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffc107;
		padding: 20rpx;
		position: fixed;
		/* 固定底部，确保按钮始终可见 */
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}



	.consult-button {
		background-color: #ffc107;
		border: none;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #333;
		min-width: 90%;
		text-align: center;
	}
</style>